<template>
  <div class="flex flex-col h-screen bg-white">
    <customerListHead
      title="我的客户"
      v-model:searchValue="searchText"
      @search="onSearch"
      @orderTypeChange="orderTypeChange"
    >
      <template v-slot:right>
        <div
          class="w-[60px] h-[32px] text-center leading-[32px] rounded-md ml-4 border border-[#436BFF] text-[#436BFF]"
          v-if="enableCreateCustomer"
          @click="onClickCreate"
        >
          新建
        </div>
      </template>
    </customerListHead>

    <div class="overflow-y-auto flex-auto">
      <customerList
        :list="list"
        :st="startTime"
        v-model:refreshing="refreshing"
        :finished="finished"
        :loading="loading"
        :onRefresh="onRefresh"
        :load-more-data="loadMoreData"
      />
    </div>

    <editCustomerView ref="editCustomerRef" @createSuccess="onRefresh" />
  </div>
</template>

<script setup>
import { ref, onMounted, computed } from "vue";
import customerList from "../components/customerList.vue";
import customerListHead from "../components/customerListHead.vue";
import { useMyXmateStore, useCommonStore } from "@/store";
import {
  getDefaultDateRange,
  getDateRange,
  getLongTimeAgo,
  ParameterDateType,
  formatCompletionTime,
} from "@/utils/timeTool";
import editCustomerView from "../../../components/customerView/editCustomerView.vue";
import selectCustomerTypeView from "../../../components/customerView/selectCustomerTypeView.vue";

const store = useMyXmateStore();
const commonStore = useCommonStore();

onMounted(() => {
  store.getCustomerCommunicationStages();
  commonStore.searchCustomerTypeAction();
  getData(makeAPIParameter());
});

const searchText = ref("");
const page = ref(1);
const pageSize = 10;
const startTime = ref(getLongTimeAgo().startDate);
const endTime = ref(getLongTimeAgo().endDate);

const stageIds = ref([]);
const orderBy = ref("meetCount");
const customerTypeId = ref("");
function makeAPIParameter() {
  return {
    searchKey: searchText.value,
    pageSize,
    pageNumber: page.value,
    startTime: formatCompletionTime(startTime.value, ParameterDateType.START_DATE),
    endTime: formatCompletionTime(endTime.value, ParameterDateType.ENE_DATE),
    stageIds: stageIds.value,
    orderBy: orderBy.value,
    asc: false,
    customerTypeId: customerTypeId.value,
  };
}

const list = computed(() => store.myCustomerList);
const customerCommunicationStages = computed(() => store.customerCommunicationStages);
const enableCreateCustomer = computed(() => commonStore.enableCreateCustomer);

const finished = ref(false);
const loading = ref(false);
async function getData() {
  loading.value = true;
  const list = await store.getMyCustomerAction(makeAPIParameter());
  loading.value = false;
  finished.value = list.length < pageSize;
  console.log("finished: ", finished.value, list.length, pageSize);
}

const refreshing = ref(false);
async function onRefresh() {
  page.value = 1;
  finished.value = false;
  refreshing.value = true;
  await getData(makeAPIParameter());
  refreshing.value = false;
}

async function loadMoreData() {
  page.value++;
  await getData(makeAPIParameter());
}

const editCustomerRef = ref();
const currentCustomerType = ref(null);

function onClickCreate() {
  editCustomerRef.value.show();
}

// 排序改变
function orderTypeChange(v) {
  console.log("排序改变: ", v);
  orderBy.value = v;
  getData(makeAPIParameter());
}

function onSearch(v) {
  page.value = 1;
  searchText.value = v;
  getData(makeAPIParameter());
}

function onConfirmFilter(parameter) {
  console.log("onConfirmFilter: ", parameter);
  const {
    orderBy: tempOrderBy,
    stageIds: tempStageIds,
    dateRange,
    customerTypeId: tempCustomerTypeId,
  } = parameter;
  if (tempOrderBy) {
    orderBy.value = tempOrderBy;
  }
  if (tempStageIds) {
    stageIds.value = tempStageIds;
  } else {
    stageIds.value = [];
  }
  if (dateRange) {
    startTime.value = dateRange[0] + " 00:00:00";
    endTime.value = dateRange[1] + " 23:59:59";
  }
  if (tempCustomerTypeId) {
    customerTypeId.value = tempCustomerTypeId;
  }
  getData(makeAPIParameter());
}
</script>

<style lang="less" scoped></style>
